<template>
    <div>
        <el-dialog title="编辑规则引擎" :visible.sync="dialogVisible" width="550px" :before-close="closeAddDialog"
            :close-on-click-modal="false">
            <el-form :model="editData" :rules="rules" ref="refAddForm" label-width="120px">

                <el-form-item size="small" label="规则名称" prop="name">
                    <el-input clearable v-model.trim="editData.name" placeholder="请输入规则名称" maxlength="20"
                        style="width: 100%">
                    </el-input>
                </el-form-item>
                <el-form-item size="small" label="规则类型" prop="userId">
                    <el-select v-model="editData.userId" filterable placeholder="请选择规则类型" style="width: 100%">
                        <el-option v-for="item in dataList" :key="item.id" :label="item.nickname + '：' + item.mobile"
                            :value="item.userId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item size="small" label="场景描述">
                    <el-input
                        maxlength="30"
                        rows="3"
                        type="textarea"
                        v-model="editData.userId"
                        resize="none"
                        :autosize="{ minRows: 2, maxRows: 5 }"
                    ></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeAddDialog" class="cancel-button">取 消</el-button>
                <el-button size="small" class="confirm-button" @click="addSubmit" v-preventReClick="1000">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
  
<script>
import { reqOrgUserList, reqMaintenanceUpdate, reqOrgList ,reqMaintenance} from "@api/api";
import { mapState } from "vuex";
import loadMore from "@mixin/loadMore";

export default {
    props:['editData'],
    mixins: [loadMore],
    components: {  },
    data() {
        return {
            dialogVisible: false,
            // 表单验证规则
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入规则名称",
                        trigger: "blur",
                    },
                ],
                orgId: [
                    {
                        required: true,
                        message: "请选择单位",
                        trigger: ["blur", "change"],
                    },
                ],
                userId: [
                    {
                        required: true,
                        message: "请选择规则类型",
                        trigger: ["blur", "change"],
                    },
                ],
            },
            dataList: [],

            projectList: [], //单位数据
            sysInstanceIndex: 1,
            sysInstanceTotalPages: 10,
            loading: false,
        };
    },
    computed: {
        ...mapState(["user"]),
    },
    watch:{
        dialogVisible(e){
            if(e){
                this.OrgUserList()
            }
        }
    },
    methods: {
        addUserId() {
            this.$refs.refaddUserId.innerVisible = true;
        },
        // 维保技工
        clickList(e) {
            this.editData.userIdList = e;
        },
        // 单位切换
        orgIdChange(e) {
            this.editData.orgId = e
            this.editData.userIdList = []
            this.editData.userId = ''
            this.OrgUserList()
        },

        async loadMore() {
            if (this.sysInstanceIndex >= Math.ceil(this.sysInstanceTotalPages / 10)) return
            this.sysInstanceIndex++
            this.loading = true;
            // 获取列表数据的方法
            await this.OrgList()
            this.loading = false;
        },
        // 获取单位列表
        async OrgList(flag) {
            var res = await reqOrgList( {
                userId: this.user.userId,
                roleName: this.user.roleName,
                tenantId: this.user.tenantId,
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            if (flag) {
                this.editData.orgId = res.data.rows[0].id || "";
            }
            this.projectList =res.data.rows
            this.OrgUserList()
        },
        async OrgUserList() {
            const res = await reqOrgUserList(1, 99, {
                orgId: this.editData.orgId,
                userId: this.user.userId,
                roleName: this.user.roleName,
                username: "",
                mobile: "",
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.dataList = res.data.rows;
        },

        // 查询维保组技工
        async Maintenance(id){
            const res=await reqMaintenance(id)
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.editData.userIdList=res.data.rows.map(item=>item.userId)
        },
        // 点击新增
        addSubmit() {
            this.$refs.refAddForm.validate(async (valid) => {
                if (!valid) return;
                const res = await reqMaintenanceUpdate({
                    id:this.editData.id,
                    name:this.editData.name,
                    orgId:this.editData.orgId,
                    userId:this.editData.userId,
                    userIdList:this.editData.userIdList,
                });
                if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
                this.$modal.notifySuccess("编辑维保配置成功");
                this.closeAddDialog()
                this.$parent.getDataList()
            });
        },
        // 点击关闭弹框
        closeAddDialog() {
            this.$refs.refAddForm.resetFields();
            this.dialogVisible = false;
            this.projectList= [] //单位数据
            this.sysInstanceIndex= 1
            this.sysInstanceTotalPages= 10
        },
    },
    mounted() {
    },
};
</script>
  
<style lang="less" scoped>
@import url("../../common.less");
</style>
  